<template>
  <div id="app">
    <div class="container">
      <nav class="sidebar">
        <ul>
          <li><router-link to="/">
            <div>
              <n-icon size="20" style="vertical-align: middle">
                <Home/>
              </n-icon>
              <span style="vertical-align: middle">系统主页</span>
            </div>
          </router-link></li>
          <li><router-link to="/about">
            <n-icon size="20" style="vertical-align: middle">
              <Analytics/>
            </n-icon>
            <span style="vertical-align: middle">商品数据分析</span>
          </router-link></li>
          <li><router-link to="/feedback">
            <n-icon size="20" style="vertical-align: middle">
              <Email/>
            </n-icon>
            <span style="vertical-align: middle">用户反馈</span>
          </router-link></li>
        </ul>
      </nav>
      <main class="main-content">
        <router-view></router-view>
      </main>
    </div>
  </div>
</template>

<script setup>

import {NIcon} from "naive-ui";
import { Home } from "@vicons/carbon"
import {Analytics} from "@vicons/carbon"
import {Email} from "@vicons/carbon"

</script>

<style>
body, html, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  height: 100%;
}

.sidebar {
  width: 200px;
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  border-right: 1px solid #34495e;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  margin: 15px 0;
  padding: 10px;
  transition: background-color 0.3s;
}

.sidebar ul li a {
  color: white;
  text-decoration: none;
}

.sidebar ul li:hover {
  background-color: #34495e;
}

.sidebar ul li a:hover {
  text-decoration: none;
}

.sidebar ul li a.router-link-active {
  color: #1abc9c;
}

.main-content {
  margin-left: 220px;
  flex-grow: 1;
  padding: 20px;
  box-sizing: border-box;
}

</style>
